<template>
  <div class="question">
    <el-button class="backBtn" type="primary" size="small" @click="$router.push('/index/projectmange')">返回</el-button>
    <el-button class="backBtn" style="position: absolute;left: 0;width: 100px" type="primary" size="small" @click="getQuestion(true)">查看全部</el-button>

    <p style="text-align: center;font-weight: bold;margin-top: 30px;font-size: 30px;">项目问题</p>
    <el-table :data="questionList" border stripe style="margin-top: 30px;">
      <el-table-column prop="date" label="问题上传时间" />
      <el-table-column prop="location" label="发生地点" />
      <el-table-column prop="description" label="问题描述" />
      <el-table-column prop="image" label="图片" >
        <template slot-scope="scope">
          <el-button type="primary" :disabled="!scope.row.image" @click="showImageBox(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="video" label="视频" >
        <template slot-scope="scope">
          <el-button type="primary" :disabled="!scope.row.video" @click="showVideoBox(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible="imageVisible" @close="imageVisible=false"  :width="innerWidth>768?'50%':'80%'">
      <div style="height: 600px;overflow: auto;">
<!--        {{ imagePaths}}-->
        <viewer  :images="imagePaths">
          <div v-for=" item  in  imagePaths" >
            <img :src="'https://www.jiajingtuzhuang.xyz' + item" style="width: 100%">
          </div>
        </viewer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="imageVisible = false">退出</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible="videoVisible" @close="videoVisible=false" :width="innerWidth>768?'50%':'80%'">
      <div style="height: 600px;overflow: auto;">
<!--         做到这啦，问题管理就差这里显示视频 -->
         <video v-for="item in videoPaths" class="question-image" :src="'https://www.jiajingtuzhuang.xyz' + item" :key="item" alt="" controls></video>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="videoVisible = false">退出</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionList: [],
      imageVisible: false,
      showQuestion: {},
      videoVisible: false
    }
  },
  methods: {
    getQuestion(isAll) {
      let url='';
      if (isAll){
         url = `/admin/auth/getProblem`
      }else {
         url = `/admin/auth/getProblem?project_id=${this.$route.params.id}`
      }


      this.$http.get(url).then(res => {
        if (res.data.status == 200) {
          this.questionList = res.data.data
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          })
        }
      })
    },
    showImageBox(data) {
      this.showQuestion = data
      this.imageVisible = true
    },
    showVideoBox(data) {
      this.showQuestion = data
      this.videoVisible = true
    }
  },
  computed: {
    imagePaths() {
      if (this.showQuestion.image){
        return this.showQuestion.image.split(';')
      }
    },
    videoPaths() {
      if (this.showQuestion.video)
        return this.showQuestion.video.split(';')
    }
  },
  mounted() {
    this.getQuestion()
  }
}
</script>

<style scoped lang="less">
.question {
  box-sizing: border-box;
  position: absolute;
  left: 200px;
  top: 0;
  display: inline-block;
  width: 900px;
  padding: 20px;
  height: 90vh;
  overflow: auto;
  .backBtn {
    position: absolute;
    right: 30px;
    top: 30px;
  }
  .question-image {
    display: block;
    margin: 0 auto;
    width: 80%;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  .question{
    left: 20vw;
  }
}
</style>
